// 引入icon
import {
  HomeOutlined,
  ReadOutlined,
  RocketOutlined,
  PlusOutlined,
} from '@ant-design/icons';

// 看到type就是和ts类型相关的
import type { MenuProps } from 'antd';

import { Menu } from 'antd';
import { history, useLocation } from 'umi';

type MenuItem = Required<MenuProps>['items'][number];

export const items: MenuItem[] = [
  {
    label: '系统首页',
    key: '/',
    icon: <HomeOutlined />,
  },
  {
    label: '轮播图管理',
    key: '/banner',
    icon: <ReadOutlined />,
    children: [
      {
        label: '轮播图列表',
        key: '/banner/list',
        icon: <RocketOutlined />,
      },
      {
        label: '添加轮播图',
        key: '/banner/add',
        icon: <PlusOutlined />,
      },
    ],
  },
  {
    label: '产品管理',
    key: '/pro',
    icon: <ReadOutlined />,
    children: [
      {
        key: '/pro/form',
        label: '表单',
        icon: <RocketOutlined />,
      },
      {
        key: '/pro/list',
        label: '产品列表',
        icon: <RocketOutlined />,
      },
      {
        label: '推荐列表',
        key: '/pro/recommend',
        icon: <PlusOutlined />,
      },
      {
        label: '秒杀列表',
        key: '/pro/seckill',
        icon: <PlusOutlined />,
      },
      {
        label: '筛选列表',
        key: '/pro/search',
        icon: <PlusOutlined />,
      },
    ],
  },
  {
    label: '账号管理',
    key: '/user',
    icon: <ReadOutlined />,
    children: [
      {
        label: '用户列表',
        key: '/user/list',
        icon: <RocketOutlined />,
      },
      {
        label: '管理员列表',
        key: '/user/admin',
        icon: <PlusOutlined />,
      },
    ],
  },
  {
    label: '数据可视化',
    key: '/data',
    icon: <RocketOutlined />,
    children: [
      {
        label: 'echarts',
        key: '/data/echarts',
        icon: <PlusOutlined />,
      },
    ],
  },
  {
    key: '/editor',
    label: '编辑器',
    icon: <RocketOutlined />,
    children: [
      {
        label: '富文本编辑器',
        key: '/editor/index',
        icon: <PlusOutlined />,
      },
      {
        label: 'MD编辑器',
        key: '/editor/md',
        icon: <PlusOutlined />,
      },
    ],
  },
  {
    label: '文件处理',
    key: '/excel',
    icon: <RocketOutlined />,
    children: [
      {
        label: '导入 excel',
        key: '/excel/import',
        icon: <PlusOutlined />,
      },
      {
        label: '导出 excel',
        key: '/excel/export',
        icon: <PlusOutlined />,
      },
    ],
  },
  {
    label: '地图',
    key: '/map',
    icon: <RocketOutlined />,
    children: [
      {
        label: '高德地图',
        key: '/map/map',
        icon: <PlusOutlined />,
      },
    ],
  },
];

export default () => {
  const checkedkeys = JSON.parse(localStorage.getItem('checkedkeys') || '[]');
  const adminname = localStorage.getItem('adminname') || '';

  let items2: any;
  if (adminname === 'admin') {
    items2 = items;
  } else {
    items2 = items.map((item: any) => {
      if (checkedkeys.includes(item.key)) {
        if (item.children) {
          item.children.map((child: any) => {
            if (checkedkeys.includes(child.key)) {
              return child;
            } else {
              return { ...child, disabled: true };
            }
          });
          return item;
        } else {
          return item;
        }
      }
    });
  }
  const location = useLocation();

  const openkey = '/' + location.pathname.split('/')[2];
  const selectkey =
    '/' +
    location.pathname.split('/')[2] +
    '/' +
    location.pathname.split('/')[3];

  // 菜单的点击事件
  const handleClick = ({
    key,
    keyPath,
  }: {
    key: string;
    keyPath: string[];
  }) => {
    history.push('/index' + key);
  };

  return (
    <Menu
      theme="dark"
      defaultOpenKeys={[openkey]}
      defaultSelectedKeys={[selectkey]}
      mode="inline"
      items={items2}
      onClick={handleClick}
    />
  );
};
